import React from 'react';
import { connect } from 'react-redux';
import { Button, Row, Col } from 'antd';
import CheckList from './list';
import Distribute from './distribute';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import services from '../../../services/api';
import { message, Tooltip } from 'antd';
import Modal from '../../../components/Modal/index';

function mapStateToProps(state) {
  return {
    risk_level: state.code.risk_level,
    case_source_type: state.code.case_source_type || []
  };
}

@connect(mapStateToProps)
class CheckListIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'caseApi';
    this.listsComponent = CheckList;
    this.model_width = '500px';
    this.queryParams = {};
    this.queryPanigation = {
      current_page: 1,
      page_size: 10
    };
    this.queryTableParams = {};
    this.state = {
      ...this.state,
      totalCount: 0,
      selectedRowKeys: [],
      caseTypes: [],
    };
  }

  componentDidMount() {
    this.getAppCodeList();
    this.getProductCodeList();
    this.getCaseTypeList()
  }

  // 开启分配
  distribute = () => {
    const { selectedRowKeys, list } = this.state
    if (selectedRowKeys.length < 1) {
      message.error('请至少勾选一条案件');
      return;
    }
    let event_id = ''
    for (let i = 0; i < selectedRowKeys.length; i ++) {
      for (let j = 0; j < list.length; j ++) {
        if (list[j].case_id === selectedRowKeys[i]) {
          if (event_id === '') {
            event_id = list[j].event_id
          } else {
            if (list[j].event_id !== event_id) {
              return message.error('请选择同一事件下的案件')
            }
          }
          break
        }
      }
    }
    Modal.open({
      title: '分配审核人员',
      width: this.model_width ? this.model_width : '600px',
      content: (
        <Distribute
          colNum={1}
          closeModal={this.closeModal}
          case_id={selectedRowKeys}
          actionType='distribute'
          event_id={event_id}
          clearSelected={() => {
            this.setState({ selectedRowKeys: [] });
          }}
          {...this.props}
        />
      ),
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false
    });
  };

  getCaseTypeList = () => {
    services[this.api].type().then(res => {
      if (res.code === 0) {
        this.setState({
          caseTypes: res.data
        });
      }
    });
  };

  getColumn = () => {
    return [
      {
        title: '请求ID',
        key: 'request_id',
        dataIndex: 'request_id',
        render: (text, record) => {
          return (
            <>
              <Tooltip title={text}>
                {text}
              </Tooltip>
            </>
          );
        },
        ellipsis: true
      },
      {
        title: '发生时间',
        key: 'request_time',
        dataIndex: 'request_time',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('评估结果', this.props.risk_level, 'risk_level', this.refreshTableFilter, [
              'key',
              'value'
            ])}
          </>
        ),
        key: 'risk_level',
        dataIndex: 'risk_level'
      },
      {
        title: (
          <>
            {this.getFilterTitle('所属渠道', this.state.applications, 'app_id', this.refreshTableFilterWithAppV2.bind(this, 'app_id'), [
              'app_id',
              'app_name'
            ])}
          </>
        ),
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('关联产品', this.state.products, 'product_id', this.refreshTableFilterWithAppV2.bind(this, 'product_id'), [
              'product_id',
              'product_name'
            ])}
          </>
        ),
        key: 'product_name',
        dataIndex: 'product_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('关联事件', this.state.events, 'event_id', this.refreshTableFilterWithAppV2.bind(this, 'event_id'), [
              'event_id',
              'event_name'
            ])}
          </>
        ),
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '状态',
              [
                {
                  value: 1,
                  name: '待分配'
                },
                {
                  value: 2,
                  name: '已分配'
                },
                // {
                //   value: 3,
                //   name: '已结案'
                // }
              ],
              'status',
              this.refreshTableFilter,
              ['value', 'name']
            )}
          </>
        ),
        key: 'status',
        dataIndex: 'status'
      },
      {
        title: (
          <>
            {this.getFilterTitle('案件分类', this.state.caseTypes, 'category_id', this.refreshTableFilter, [
              'case_category_id',
              'case_category_name'
            ])}
          </>
        ),
        key: 'case_category_name',
        dataIndex: 'case_category_name'
      },
      {
        title: '请求策略',
        key: 'hit_strategy_name',
        dataIndex: 'hit_strategy_name',
        render: (text, record) => {
          return (
            <>
              <Tooltip title={text}>
                <div className='overflowtext'>{text}</div>
              </Tooltip>
            </>
          );
        },
        ellipsis: true
      },
      {
        title: (
          <>
            {this.getFilterTitle('案件来源', this.props.case_source_type, 'source_type', this.refreshTableFilter, [
              'key',
              'value'
            ])}
          </>
        ),
        key: 'source_type',
        dataIndex: 'source_type'
      },
      {
        title: '创建人',
        key: 'create_user_name',
        dataIndex: 'create_user_name',
        render: (text, record) => {
          return (
            <>
              <Tooltip title={text} placement='topLeft'>
                <div className='overflowtext'>{text}</div>
              </Tooltip>
            </>
          );
        }
      },
      {
        title: '创建时间',
        key: 'create_time',
        dataIndex: 'create_time',
        render: (text, record) => {
          return (
            <>
              <Tooltip title={text} placement='topLeft'>
                <div>{text}</div>
              </Tooltip>
            </>
          );
        }
      }
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入请求ID|请求策略进行搜索'
      }
    ];
    // 名单数据选择配置
    const rowSelection = {
      columnWidth: 30,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys
        });
      },
      getCheckboxProps: record => ({
        disabled: record.status !== '待分配',
        name: record.request_id
      }),
      hideDefaultSelections: true,
      selectedRowKeys: this.state.selectedRowKeys
    };
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.distribute}>
              分配
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='end'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          {this.props.risk_level ? (
            <ListsComponent
              {...this.state}
              {...this.props}
              rowKey='case_id'
              edit={this.edit}
              queryList={this.freshQueryList}
              refreshTableFilter={this.refreshTableFilter}
              onChangePagination={this.onChangePagination}
              showDetail={this.showDetail}
              queryTableParams={this.queryTableParams}
              getFilterTitle={this.getFilterTitle}
              rowSelection={rowSelection}
              columns={this.getColumn()}
            />
          ) : (
              ''
            )}
        </div>
      </div>
    );
  }
}

export default CheckListIndex;
